  <extend name="Public/base"/>
  <block name="style">
    <link href="__PUBLIC__/lib/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
  </block>

  <block name="body">

  <div class="attachment-wrap">
      <div class="h50">
        <ul class="nav nav-tabs">
            <li class=""><a href="{:U('index')}">媒体文件</a></li>
            <li class=""><a href="{:U('attachmentCategory')}">附件分类</a></li>
            <li class=""><a href="{:U('setting')}">设置</a></li>
        </ul>
        <div class="form-group"></div>
    </div>
    <!--此页面主体内容-->
    <div class="row ml0 mr0">
        
         <div class="col-xs-9 col-sm-9 button-list clearfix">   
         <div class="col-xs-2 col-sm-2 form-group"><span id="web_uploader_wrapper_attachmentIndex" class="btn btn-info btn-raised btn-sm">上传</span></div>
           <div class="col-xs-10 col-sm-10">
           <form class="form" method="post" action="{:U('index')}">
              <div class="form-group">
              <label for="date_d"  class="fl f14 control-label">类型:</label>
              <div class="col-md-2">                                                
                <select class="form-control">
                  <option value="0">选择类型</option>
                  <option value="1">图像</option>
                  <option value="2">视频</option>
                  <option value="3">文件</option>
                </select>
                </div>

                <label for="date_d"  class="fl f14 control-label">日期:</label>
                <div class="col-md-2">
                 <input id="date_d" class="form-control form-date" type="text" value="选择日期" name="create_time" readonly>
                </div>

                <label for="date_d"  class="fl f14 control-label">分类:</label>
                <div class="col-md-3">
                <select class="form-control">
                  <option value="0">选择分类</option>
                  <option value="1">图标素材</option>
                  <option value="2">人物</option>
                  <option value="3">风景</option>
                </select>

                </div>
               <button type="submit" class="btn btn-info btn-raised btn-sm">应用</button>
            </div>
            </form>
            </div>
         </div>
          <!--搜索-->
          <div class="col-xs-3 col-sm-3 clearfix">
              <form class="form" method="get" action="{$search.url}">
                  <div class="form-group">
                      <div class="input-group search-form">
                          <input type="text" name="keyword" class="search-input form-control" value="{$_GET.keyword}" placeholder="输入图片名称搜索">
                          <span class="input-group-btn"><button class="btn btn-fab btn-fab-mini"><i class="iconfont icon-search"></i></button></span>
                      </div>
                  </div>
              </form>
          </div>
    </div>
      <hr/>
    <div class="row pl-75 mt-20 ml0 mr0">
    <ul>
       <volist name="attachment_list_data" id="attachment_data">
         <li class="col-sm-6 col-md-2 col-lg-2 mb-20" data-id="{$attachment_data.id}">
            <div class="box-style ud-media-li">
              <div class="ud-gj-mediali thumbnail radius33">   
                <div class="centered">     
                    <img src="{$attachment_data.id|getThumbImageById=###,120,100,0,true}" alt="" class="w mediapic">
                </div>
              </div>
              <div class="ud-gj-mediatit">
                 <span class="w75 disline oh nowarp 22">{$attachment_data.name}</span>
                 <span class="showAttachmentInfo" data-id="{$attachment_data.id}">
                    <a href="" data-toggle="modal" data-target="#attachmentInfoModal">
                    <span class="right color-icon">
                       <i class="iconfont icon-appshusandian f18"></i>
                    </span>
                    </a>
                 </span>
              </div>
            </div>
          </li>

      </volist> 
      </ul>      
  </div>
  {$table_data_page}
  <!-- Modal Structure -->
  <div class="modal fade" id="attachmentInfoModal" tabindex="-1" role="dialog" aria-labelledby="attachmentInfoModalLabel">
    <div class="modal-dialog mt-90 mb-90" role="document">
        <div class="modal-content">

        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title tc color-26 f18">附件详情</h4>
      </div>

          <div class="modal-body bg-color-fff">
             <form action="{:U('editAttachment')}" method="post" class="editAttachment">
             <div class="row">
             <input type="hidden" name="id" id="file-id" value="">
                <div class="row ml-0 mr-0">
                    <div class="col-sm-6 oh tc media-modal-pic">                    
                        <a href="__ADMIN_IMG__/sidebar.png" id="file-href" target="_blank">
                          <img src="__ADMIN_IMG__/sidebar.png" id="file-src" alt="">
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <ul class="f13 media-modal-ul">
                          <li><strong>文&nbsp;&nbsp;件&nbsp;名：</strong><span id="file-name">未知</span></li>
                          <li><strong>文件类型：</strong><span id="file-type">未知</span></li>
                          <li><strong>文件大小：</strong><span id="file-size">未知</span></li>
                          <li><strong>上传时间：</strong><span id="file-uploadtime">未知</span></li>
                          <li><strong>上&nbsp;&nbsp;传&nbsp;者：</strong><span id="file-author">未知</span></li>
                          <li><strong>URL：</strong><span id="file-url">无</span></li>
                        </ul>
                        <a id="delAttachmentUrl" href="{:U('delAttachment')}" class="btn btn-danger btn-raised btn-sm confirm ajax-get">删除</a>
                        <span id="url-copy" class="btn btn-success btn-raised btn-sm copyurl">
                        复制URL</span>
                    </div>
                </div>

                <div class="col-sm-12 mt-20">

                       <div class="form-group m0">
                        <label for="alt" class="col-md-2 control-label">替代文本:</label>
                        <div class="col-md-10">
                          <input type="text" class="form-control" name="alt" id="file-alt" placeholder="alt">
                        </div>
                      </div>  
                    <div class="form-group m0">
                        <label for="file-category" class="col-md-2 control-label">分类:</label>
                        <div class="col-md-10 ">
                         <select class="form-control">
                           <option>人物</option>
                            <option>景色</option>
                         </select>
                        </div>
                      </div>                   
                  </div>  
                      
             </div>
             <div class="ud-gj-add">
                  <button type="submit" class="radius ud-button bg-color-orange2 ud-shadow ajax-post" target-form="editAttachment">确认</button>
             </div>
             </form>  
          </div>
        </div>
     </div>
   </div>
</div>
</block>

  <block name="script">
  <script type="text/javascript" charset="utf-8" src="__PUBLIC__/lib/webuploader/js/webuploader.js"></script>

          <link href="__PUBLIC__/lib/datetimepicker/datetimepicker.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="__PUBLIC__/lib/datetimepicker/datetimepicker.min.js"></script>

        <script>
            $('.form-datetime').datetimepicker({
                language: "zh-CN",
                autoclose: true,
                format: 'yyyy-mm-dd hh:ii'
            });
            $('.form-date').datetimepicker({
                language: "zh-CN",
                minView: 2,
                autoclose: true,
                format: 'yyyy-mm-dd'
            });
            $('.form-time').datetimepicker({
                language: "zh-CN",
                minView: 0,
                startView:1,
                autoclose: true,
                format: 'hh:ii'
            });
            $('.time').change(function () {
                var fieldName = $(this).attr('data-field-name');
                var dateString = $(this).val();
                var date = new Date(dateString);
                var timestamp = date.getTime();
                $('[name=' + fieldName + ']').val(Math.floor(timestamp / 1000));
            });
        </script>

    <script type="text/javascript">
     /*弹窗*/
    $(function () { 
        var id = "#web_uploader_wrapper_attachmentIndex";
        var uploader_attachmentIndex  = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: 'Uploader.swf',
            // 文件接收服务端。
            server: U('Admin/Attachment/uploadPicture'),
            fileNumLimit: 5,
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {'id': id, 'multi': false},
            // 只允许选择图片文件
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
                /*上传成功*/
        uploader_attachmentIndex.on('uploadSuccess', function (file, data) {
            if(data.status){
                updateAlert(data.info);
                window.location.href="{:U('index')}";
            }else{
                updateAlert(data.info);
            }
        });
        //模态框内容
        $(".showAttachmentInfo").click(function () {
            var $this = $(this);
            var attachmentId=$this.attr('data-id');
            $.post("{:U('Admin/Attachment/attachmentInfo')}", {id:attachmentId}, function (res) {
                  $("#file-name").text(res.name);
                  $("#file-type").text(res.type);
                  $("#file-size").text(res.size);
                  $("#file-uploadtime").text(res.uploadtime);
                  $("#file-author").text(res.author);
                  $("#file-url").text(res.url);

                  $("#file-src").attr('src',res.url).attr('alt',res.alt);
                  $("#file-href").attr('href',res.url);
                  $("#file-alt").val(res.alt);
                  $("#file-id").val(res.id);
                  var newDelUrl=$("#delAttachmentUrl").attr('href').replace(".html","/id/"+res.id+".html");
                  $("#delAttachmentUrl").attr('href',newDelUrl);
              })
          })
      })
    /*复制URL*/
 $(document).ready(function(){  
            if ( window.clipboardData ) {  
                $('.copyurl').click(function() {  
                    window.clipboardData.setData("Text", $("#file-url").text());  
                    alert('复制成功！');  
                });  
            } else {  
                $(".copyurl").zclip({  
                    path:'http://img3.job1001.com/js/ZeroClipboard/ZeroClipboard.swf',  
                    copy:function(){return $("#file-url").text();},  
                    afterCopy:function(){alert('复制成功！');}  
                });  
            }  
        });   
  </script>

  </block>